<template>
  <div>
    <div
      id="pie-container"
      :style="{ width: stylePie.width + 'px', height: stylePie.height + 'px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "pieChart",
  props: {
    stylePie: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    initChart() {
      const dom = document.querySelector("#pie-container");
      var myChart = echarts.init(dom);
      const option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 0,
        // borderColor: '#fff',
        // borderWidth: 2
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 56,itemStyle: {color: '#d5871a'} },
        { value: 88, itemStyle: {color: '#00b23c'} },
      ]
    }
  ],
  graphic: {
        type: 'group',
        left: 'center',
        top: 'center',
        children: [
            {
                type: 'text',
                x:-15,
                y:-15,
                // left: 'center',
                // top: 'top',
                style: {
                    fill: 'rgba(255,255,255,.7)',
                    text: '88',
                    font: 'bold 12px Microsoft YaHei'
                }
            },
            {
                type: 'text',
                z: 100,
                x:0,
                y:50,
                style: {
                    fill: 'rgba(255,255,255)',
                    text: '预警总数',
                    font: '12px Microsoft YaHei',
                    textAlign: 'center'
                },
                // 调整第二行文本的位置
                left: 'center',
                top: '50%',
                y: 100
            }
        ]
    }
};
      myChart.setOption(option);
    },
  },
  mounted() {
    console.log(this.style);

    this.initChart();
  },
};
</script>

<style lang="scss" scoped>
</style>
